<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title>Team Rogue UP Admissions Tool</title>
        <script src="http://www.google.com/jsapi"></script>
		<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
		<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="layers.js"></script>
        <script type="text/javascript" src="database.js"></script>
        <script type="text/javascript" src="geocode.js"></script>
        <script type="text/javascript" src="information.js"></script>
        <script type="text/javascript" src="controller.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
		<script>
            google.load('visualization', '1', { packages: ['table'] }); //must be the first to be called
            $(function() {
              $("#tabs").tabs()
              });
            $(document).ready(rogueAdmissions.initialize);
        </script>
    </head>                
    <body>
        <div id="wrap">
            <div id="top">
                <div id="up_logo"><img src="logo2.png"></div>
                <div id="map_title"></div>
            </div>
            <div id="bottom>">
                <div id="options_panel">
                    <h2>Options Panel</h2>
                    <div id="display_panel" class='panel'>
                        <table>
                            <tr>
                                <th class="adjusted">Display</th>
                            </tr>
                            <tr>
                                <td>
                                    <input type="radio" class="radiogroup" name="displayby" value="school" checked>
                                    High School
                                </td>
                                <td>
                                    <input type="radio" class="radiogroup" name="displayby" value="student" checked>
                                    Student
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="radio" class="radiogroup" name="zipRadio" value='true' checked>
                                    Show Zip-codes
                                </td>
                                <td>
                                    <input type="radio" class="radiogroup" name="zipRadio" value='false'>
                                    Hide Zip-codes
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="loc_panel" clas='panel'>
                        <table>
                            <tr>
                                <th>Location</th>
                            </tr>
                            <tr>
                                <td>City</td>
                                <td>
                                    <input class="smaller" type="text" id="city">
                                </td>
                            </tr>
                            <tr>
                                <td>State</td>
                                <td>
                                    <!-- maxlength needs to be set in html can't be done in css -->
                                    <input class="smaller" type="text" id="state" maxlength='2' value='OR'>
                                </td>
                            </tr>
                            <tr>
                                <td>Zip</td>
                                <td>
                                    <input class="smaller" type="text" id="zipcode" maxlength='5'>
                                </td>
                            </tr>
                        </table>

                    </div>
                    <div id="filter_panel" class='panel'>
                        <table>
                            <tr>
                                <th class="adjusted">Filter By</th>
                            </tr>
                            <tr>
                                <td>GPA:</td>
                                <td>
                                    <label for='gpa_min'>Min</label>
                                    <input type="text" class="smaller" id="gpa_min" value='0.0'>
                                </td>
                                <td>
                                    <label for='gpa_max'>Max</label>
                                    <input type="text" class="smaller" id="gpa_max" value='4.0'>
                                </td>
                            </tr>
                            <tr>
								<td>SAT-MATH:</td>
								<td>
									<label for='satM_min'>Min</label>
			                        <input type="text" class="smaller" id="satM_min" value='0'>
                                </td>
								<td>
									<label for='satM_max'>Max</label>
			                        <input type="text" class="smaller" id="satM_max" value='800'>
                                </td>					
							</tr>
                            <tr>
								<td>SAT-VERBAL:</td>
								<td>
									<label for='satV_min'>Min</label>
			                        <input type="text" class="smaller" id="satV_min" value='0'>
                                </td>
								<td>
									<label for='satV_max'>Max</label>
			                        <input type="text" class="smaller" id="satV_max" value='800'>
                                </td>
							</tr>
                        </table>
                    </div>
                    <input type="button" id="updateButton" class='button' value="Update">
                    <input type="button" id="resetButton" class='button' value='Reset'>
                </div>
                <div id="tabs">
                    <ul>
                        <li><a href="#tabs-1">Map</a></li>
                        <li><a href="#tabs-2">Map Details</a></li>
                    </ul>
                    <div id="tabs-1">
                        <div id="contig_us_map_canvas"></div>
                    </div>
                    <div id="tabs-2">
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
